
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import weixinShare from '../../lib/weixinShare';
import { addErrorListener } from '../../lib/handleError';
import Tools from "../../lib/tools"

import AJAX from '../../lib/ajax';
import weui from 'weui.js'

require('../../lib/rem');
require('../../styles/common.less');
require('./SendGuide.less');
require('../../styles/iconfont/iconfont.css');

class SendGuide extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isReady: false,     //是否可以加载页面
      open_id: '', // 用户的open_id
      province: '请选择收件省、自治区或直辖市',
      areaList: [],
      routePath: '',
      debug: false
    };
  }

  componentWillMount() {
    addErrorListener()()
    weixinShare.hideAll()
  }

  componentDidMount() {
    AJAX.appendBaiduAnalysis()

    if (!this.state.debug) {
      const param = Tools.getParams();
      if (!param.code) {
        AJAX.getWxCode();
      } else {
        const params = {
          code: param.code
        }

        let openId = Tools.readCookie("openId");

        if (!openId) {
          AJAX.request("login", params, (data) => {
            const sid = data.body.sid
            openId = data.body.open_id
            Tools.createCookie("sid", sid, data.body.time, data.body.expires)
            Tools.createCookie("openId", openId, data.body.time, data.body.expires)
            this.setOpenId(openId);
          })
        } else {
          this.setOpenId(openId)
        }
      }
    }

    AJAX.fetchGet("advertisingInfo", {}, (data) => {
      
      const area = [];

      data.map((item, index) => {
        area.push({
          value: index,
          label: item.name,
          url: item.url
        })
      })
      
      this.setState({
        areaList: area,
        routePath: area[0].url
      })
    })

    setTimeout(() => { // 延时显示避免字号发生跳动
      this.setState({
        isReady: true, //是否可以加载页面
      })
    }, 10)
  }

  setOpenId(openId) {
    this.setState({
        open_id: openId
      },
      () => {
        this.fetchRecord(1, 'debang_menu')
      }
    )
  }

  fetchRecord(type, key) { // 活动点击量
    const params = {
      action: type,
      key: key,
      open_id: this.state.open_id
    }
    AJAX.fetchGet('record', params, (res) => {})
  }

  handleRoute () {
    this.fetchRecord(1, 'debang_discount');
    window.location.href = this.state.routePath
  }

   handleSelectPro() {
     weui.picker(this.state.areaList,
     {
       className: 'custom-classname',
       container: 'body',
       defaultValue: [0],

       onConfirm: (result) => {
         this.setState({
           province: result[0].label,
           routePath: result[0].url
         })
       },
       title: '请选择收件省、自治区或直辖市'
     })
   }

  render() {
    return (
      this.state.isReady &&
      <div className='express'>
        <div className="express_box">
          <div className="selectProvince" onClick={this.handleSelectPro.bind(this)}>
            <img src="https://cdn2.jinlb.cn/pic/7e/d8/7ed8ac4da5dc4b1322cd40cb2a5d31e7.png" alt="" />
            <div className="provinceText">
              <label>{this.state.province}</label>
              <em className="icon iconfont iconIcon_down"></em>
            </div>
          </div>
          
          <div className="advert" onClick={this.handleRoute.bind(this)}>
            {/* <a href={}> */}
              <img style={{'width': '100%'}} src="https://cdn2.jinlb.cn/pic/69/79/6979b305255211387b10c004a64e7d98.jpg" alt=""/>
            {/* </a> */}
          </div>
          <div className="buttonArea-box">
            <div className="buttonArea">
              <a href="./SendExpress">去寄件</a>
            </div>
          </div>
        </div>

        <div className="express_tips">
          <h4>温馨提示</h4>
          <p>请选择收件目的地后，点击图片完成任务后,即可享受 你的专属寄件优惠。</p>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<SendGuide />, document.getElementById('app'));
if (module.hot) {
  module.hot.accept();
}

